<template>
    <el-dialog
        title="选择服务"
        :visible.sync="showValue"
        append-to-body
        :close-on-click-modal="false"
        width="450px"
        :before-close="clearData"
    >
        <div class="wrap">
            <div style="margin: 15px 0"></div>
            <el-tree
                :data="serveList"
                show-checkbox
                node-key="key"
                ref="tree"
                highlight-current
                :props="defaultProps"
                :default-checked-keys="checkArr"
            >
            </el-tree>
        </div>
        <span slot="footer">
            <el-button size="small" @click="clearData">取 消</el-button>
            <el-button
                type="primary"
                size="small"
                :loading="loading"
                @click="save"
                >确 定</el-button
            >
        </span>
    </el-dialog>
</template>

<script>
export default {
    props: {
        value: Boolean,
        form: Object,
        serveList: Array,
        arr: Array
    },
    data () {
        return {
            copyForm: {},
            cityOptions: [],
            checkAll: false,
            isIndeterminate: true,
            checkArr: [],
            loading: false,
            showValue: false,
            defaultProps: {
                children: 'leafNodeVOList',
                label: 'value',
                id: 'key'
            }
        }
    },
    watch: {
        value (val) {
            this.showValue = val
            if (val) {
                this.copyForm = this.copyArr(this.form)
                this.checkArr = this.copyArr(this.arr)
            }
        },
        showValue (val) {
            this.$emit('update:value', val)
        }
    },
    methods: {
        // 清空数据
        clearData () {
            this.checkArr = []
            this.cityOptions = []
            this.isIndeterminate = false
            this.loading = false
            this.showValue = false
        },
        // 保存表单
        async save () {
            if (this.$refs.tree.getCheckedKeys().length === 0) {
                return this.$message({
                    showClose: true,
                    message: '请选选择服务',
                    type: 'warning'
                })
            }
            let newArr = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes())
            let arr = []
            newArr.forEach(item => {
                arr.push(item.value)
            })
            this.$emit('setServeIds', this.$refs.tree.getCheckedKeys(), arr.join(','))
            this.clearData()
            this.$message({
                showClose: true,
                message: '添加成功',
                type: 'success'
            })
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.wrap
    height: 400px
    overflow: auto

.items
    width: 200px

.tip
    color: red
    margin-bottom: 20px
</style>